<template>

  <!-- 定义布局容器 -->
  <el-container class="home-container">
<!-- top -->
    <el-header style="height: 60px;background-color: #000000;">
      <div>
        <span style="color: #ffffff;font-weight: bold;">南欧汽配之家</span>
      </div>
      <el-row>
        <i class="el-icon-question" style="font-size: 30px;padding-right: 20px;" @click="dialogVisible = true"></i>
        <el-button type="danger" round style="text-align: center;" @click="logout">退出登录</el-button>
      </el-row>
    </el-header>

<!-- 导航栏 -->
    <div>
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#303133"
          text-color="#fff"
          active-text-color="#FFE100"
          style="padding-left: 500px;background-color: #303133;"
          >
           <el-menu-item index="1" style="margin-right: 60px;font-size: 18px;" @click="tiaozhuan1"><i class="el-icon-s-home"></i>首页</el-menu-item>
           <el-menu-item index="2" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan2"><i class="el-icon-s-shop" ></i>购物中心</el-menu-item>
           <el-menu-item index="3" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan3"><i class="el-icon-s-opportunity"></i>车型查询</el-menu-item>
           <el-menu-item index="4" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan4"><i class="el-icon-s-claim"></i>关于我们</a></el-menu-item>
           <el-menu-item index="5" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan5"><i class="el-icon-user-solid"></i>个人中心</a></el-menu-item>
           </el-menu>
    </div>

    <!-- 帮助弹框 -->
     <el-dialog
       title="帮助"
       :visible.sync="dialogVisible"
       width="60%"
       :before-close="handleClose">
       <div class="title"><i class="el-icon-price-tag"></i>关于本站</div>
           <el-row>
            <el-col :span="18" :offset="3">
               <el-main>
                <el-card class="box">
                    <p>
                      <el-tag type="success" effect="dark">功能</el-tag>
                      <br>
                        游客功能:用户可以在未登录时,查看首页,购物中心和关于项目的相关信息
                      <br>
                        用户功能：用户可登录系统可维护购买商品
                     <br>
                       游客功能:用户可以在未登录时,查看首页,购物中心和关于项目的相关信息
                     <br>
                       用户功能：用户可登录系统可维护购买商品
                     <br>
                       游客功能:用户可以在未登录时,查看首页,购物中心和关于项目的相关信息
                     <br>
                       用户功能：用户可登录系统可维护购买商品
                    </p>
                    <p>
                        <el-tag type="primary" effect="dark">优点</el-tag>
                    </p>
                    <p>
                        <el-tag type="warning" effect="dark">模块</el-tag>
                        本系统包含的模块：注册模块、登录模块、用户模块、管理员模块、供应商模块。
                    </p>
                    <!-- <el-image :src="about" fit="fit" style="width: 100%;height: 100%"></el-image> -->
                </el-card>
                </el-main>
            </el-col>
           </el-row>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
       </span>
     </el-dialog>

    <!-- 定义头标签 -->

<!-- 购物车+搜索 -->
	<div class="search_bar clearfix" style="margin-top: 20px;">
		<a href="index.html" class="logo fl">
      <!-- <img src="images/logo.png"> -->
    </a>
		<div class="search_con fl">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索">
		</div>
		<div class="guest_cart fr">
			<a href="#" class="cart_name fl"><i class="el-icon-shopping-cart-full"  style="margin-left: -80px;margin-right: 10px;"></i>我的购物车</a>
			<div class="goods_count fl" id="show_count">1</div>
		</div>
	</div>

	<div class="navbar_con">
		<div class="navbar">
			<h1 class="fl">全部商品分类</h1>
			<!-- <ul class="navlist fl" >
				<li><a href="">首页</a></li>
			</ul> -->
		</div>
	</div>

	<div class="center_con clearfix" style="margin-top: 20px;">

		<ul class="subnav fl"  >
		  <li style="margin-left: -50px;"><a href="#model01" v-for="menu in menuList">
         <i :class="menuIcon[menu.id]" style="padding-right: 10px;"></i>{{menu.name}}</a>
      </li>
		</ul>
		<div class="slide fl">
      <!-- 走马灯-->
      <el-carousel height="270px"  width="1000px" direction="vertical" :autoplay="false">
          <el-carousel-item v-for="item in item" :key="item">
            <img :src="item.url" style="width: 100%;height: 100%;"/>
          </el-carousel-item>
        </el-carousel>
			<ul class="points"></ul>
		</div>
	</div>

	<div class="list_model" v-for="menu in menuList">

		<div class="list_title clearfix" style="margin-top: 20px;" >
			<h3 class="fl" id="model02" v-text="menu.name"></h3>
			<a href="#" class="goods_more fr" id="fruit_more" @click="tiaozhuan6">查看更多 ></a>
		</div>

		<div class="goods_con clearfix">
			<div class="goods_banner fl"><img :src="menu.path1"></div>
			<ul class="goods_list fl" >
				<div v-for="children in menu.children">
          <li v-for="(v,k) in goodsList" :key="v.id" v-if="v.itemCatId == children.id">
               <h4><a href="#" @click="goodDetails(v.id)" v-text="v.title"></a></h4>
                   <a href="#" @click="goodDetails(v.id)"><img :src="imgUrl+v.images" /></a>
              <div class="prize" v-text="'￥'+v.price/100"></div>
				</li>
        </div>

			</ul>
		</div>
	</div>

    <TheHeader></TheHeader>
  </el-container>
</template>

<script>
import TheHeader from '../the/TheFooter.vue'
import TheFooter from '../the/TheHeader.vue'
export default {
  // 初始化函数
  created () {
    // 动态获取左侧菜单信息
    this.getMenuList()
    this.getGoodsList()
    // 设定模式选中按钮
    this.defaultActive = window.sessionStorage.getItem('activeMenu')
  },
  components: {
    TheHeader,
    TheFooter
  },
  data () {
    return {
      // activeIndex: '1',
      activeIndex2: '2',
      // 左侧菜单数据
      menuList: [],
      goodsList: [],
      imgUrl: '../images',
      menuIcon: {
        1: 'iconfont iconuser',
        9: 'iconfont iconshangpin',
        27: 'iconfont iconicon--copy',
        35: 'iconfont iconquanxian',
        10: 'iconfont iconziyuan',
        11: 'iconfont iconquanxian'
      },
      item: [
        {
          name: '1',
          url: require('../../assets/img/9.jpg')
        },
        {
          name: '2',
          url: require('../../assets/images/2.jpg')
        },
        {
          name: '3',
          url: require('../../assets/image_index/banner_1.jpg')
        },
        {
          name: '4',
          url: require('../../assets/image_index/banner_2.jpg')
        }
      ],
      // 定义是否折叠
      isCollapse: false,
      // 是否展现折叠动态效果
      isCollapseTransition: false,
      // 定义默认高亮
      defaultActive: ''
    }
  },
  methods: {
    // 跳转到商品详情页
    async goodDetails (goodId) {
      // window.eventBus.$emit('good',v)
      console.log(goodId)
      // window.eventBus.$emit("goodId",goodId)
      window.sessionStorage.setItem('goodId', goodId)
      this.$router.push('/goodsDetails')
    },
    test () {
      alert('ddddd')
    },
    tiaozhuan1 () {
      this.$router.push('/index')
    },
    tiaozhuan2 () {
      this.$router.push('/shopping')
    },
    tiaozhuan3 () {
      this.$router.push('/car')
    },
    tiaozhuan4 () {
      this.$router.push('/about')
    },
    tiaozhuan5 () {
      this.$router.push('/usernew')
    },
    tiaozhuan6 () {
      this.$router.push('/list')
    },
    logout () {
      // 1.删除session中的数据
      window.sessionStorage.clear()
      // 2.用户访问登录页面
      this.$router.push('/login')
    },
    async getMenuList () {
      const { data: result } = await this.$http.get('/shop/getShopList')
      if (result.status !== 200) return this.$message.error('左侧菜单查询失败')
      this.menuList = result.data
      console.log(result.data)
    },
    async getGoodsList () {
      const { data: result } = await this.$http.get('/yingliangbang/getGoodsList')
      if (result.status !== 200) return this.$message.error('图片加载失败')
      this.goodsList = result.data
      console.log(result.data)
    },
    // 设定左侧折叠展开效果
    collspseClick () {
      this.isCollapse = !this.isCollapse
    },
    defaultActiveMenu (activeMenu) {
      // 为了实现返回之后的选中效果,应该将数据保存到第三方中sessionStory
      window.sessionStorage.setItem('activeMenu', activeMenu)
      this.defaultActive = activeMenu
    }
  }
}
</script>

<!-- 防止样式重叠 -->
<style lang="less" scoped>
  @import "../../assets/css/main.css";
  @import "../../assets/css/reset.css";
   .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }

  .el-header {
    background-color: rgb(43,42,50);
    display: flex; //灵活的盒子容器
    justify-content: space-between; //左右对齐
    align-items: center; //文本元素居中对齐
    color: #FFFFFF; //设定字体颜色
    padding-left: 1px;

    >div {
      display: flex;
      align-items: center;

      span {
        margin-left: 15px;
        font-size: 25px; //设定字体高度
      }
    }
  }

  .el-aside {
    // background-color: rgb(43,42,50);

    .el-menu {
      border-right: none;
    }
  }

  .el-main {
    background-color: #EEEEEE;
    background-image: url('../../assets/img/2.png') ;
  }

  .home-container {
    // height: 100%;
    width: 100%;
  }

  .iconfont {
    margin-right: 8px;
  }

  //定义折叠项
  .leftCollapse {
    //设定背景色
    // background-color: black;
    //定义字体大小
    // font-size: 10px;
    //定义行高
    // line-height: 30px;
    //定义颜色
    // color: #FFFFFF;
    //设置居中
    // text-align: center;
    //设定字符间距
    // letter-spacing: 4px;
    //鼠标放上之后设置为小手
    // cursor: pointer;
  }

  .touxiang_box {
            height: 15px;
            width: 15px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 5px #ddd;
            position: absolute;
            left: 87%;
            background-color:#ddd ;
            img{
                width: 100%;
                height: 100%;
                border-radius: 100%;
                padding: auto;
            }
  }
</style>
